<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <div>
          <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
          <span v-html="Data.Title" style="display:inline-block"></span>
          <el-button
            @click="divvisibility(2)"
            type="text"
            style="float:right"
            v-if="!preview"
          >{{see}}</el-button>
        </div>
        <div v-if="visible">
          <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
          <div class="option-area" style="margin: 5px;" v-if="!lixian">
            <el-row>
              <el-col :span="6" v-bind:key="opt.itemId" v-for="opt in  Data.Options">
                <el-table :data="opt.SubItems" style="width: 100%">
                  <el-table-column>
                    <template slot="header" slot-scope="scope">
                      <div>
                        <el-checkbox
                          name="opt.itemId"
                          @change="changeSubItem(opt)"
                          v-model="opt.HasChecked"
                          style="color:#909399;font-weight:bold"
                        >{{opt.itemName}}</el-checkbox>
                      </div>
                    </template>
                    <template slot-scope="scope">
                      <el-badge
                        type="primary"
                        v-bind:value="scope.row.OrderIndex"
                        v-if="scope.row.HasChecked&&(scope.row.OrderIndex>1)"
                      />
                      <el-badge
                        v-bind:value="scope.row.OrderIndex"
                        v-if="scope.row.HasChecked&&(scope.row.OrderIndex==1)"
                      ></el-badge>
                      <el-checkbox
                        :disabled="!opt.HasChecked"
                        v-model="scope.row.HasChecked"
                        @change="SetOrderIndex(opt, scope.row)"
                      >{{scope.row.itemName}}</el-checkbox>
                      <el-alert v-bind:title="scope.row.memo" v-if="scope.row.memo!=''" type="info"></el-alert>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
           <!-- 离线表格模式-->
            <div v-if="lixian">
              <table border="1px" cellspacing="0" v-if="type" style="width: 50%">
                <tr v-for="opt in Data.Options" :key="opt.itemName">
                    <th>{{opt.itemName}}</th>
                    <td v-for="(child,index) in opt.SubItems" :key="child.itemName"  >
                       <tr style="display:inline-block">{{child.itemName}} </tr>
                       <tr style="display:inline-block;margin-left:30px"> {{index+1}}</tr>
                    </td>
                    
                </tr>
              </table>
            </div>
        </div>
      </div>
    </div>

    <div id="editor" v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <EditorComponent v-model="Data.Title" :Html="Data.Title"/>
        <div class="radius" style="border-radius:2px; height:50px"></div>

        <div>
          <el-input placeholder="请输入内容" v-model="Data.MaxSel">
            <template slot="prepend">选择数量</template>
          </el-input>
        </div>
        <el-collapse>
          <el-collapse-item v-for="opt in Data.Options" v-bind:key="opt.itemId" :name="opt.itemId">
            <template slot="title">
              <table>
                <tr>
                  <td>
                    <div id="title-row">
                      <el-input
                        size="small"
                        @focus.stop="handleClick()"
                        @input="handleClick()"
                        @click.stop="handleClick()"
                        v-model="opt.itemName"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                  </td>
                  <td>
                    <div style="display: inline-block;margin-top: 5px;">
                      <el-button
                        type="warning"
                        @click.stop="remove(opt.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-minus"
                        circle
                      ></el-button>
                      <el-button
                        type="danger"
                        @click.stop="insert(opt.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-plus"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click.stop="moveUp(opt.itemId)"
                        icon="el-icon-top"
                        circle
                      ></el-button>
                      <el-button
                        size="mini"
                        style="display: inline-block;"
                        @click.stop="moveDown(opt.itemId)"
                        icon="el-icon-bottom"
                        circle
                      ></el-button>
                    </div>
                  </td>
                  <td></td>
                </tr>
              </table>
            </template>
            <div>
              <el-button
                size="mini"
                style="float:right"
                icon="el-icon-plus"
                @click="addSubItem(opt.itemId)"
                type="primary"
              >添加子选项</el-button>
              <el-table :fit="true" :data="opt.SubItems" style="width: 100%">
                <el-table-column label="选项文字">
                  <template slot-scope="scope">
                    <div id="title-row">
                      <el-input
                        size="small"
                        style="display: inline-block;"
                        v-model="scope.row.itemName"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div style="display: inline-block;margin-top: 5px;">
                      <el-button
                        type="primary"
                        @click.stop="removeSubItem(opt.itemId, scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-minus"
                        circle
                      ></el-button>
                      <el-button
                        type="primary"
                        @click.stop="insertSubItem(opt.itemId, scope.row.itemId)"
                        size="mini"
                        style="display: inline-block;"
                        icon="el-icon-plus"
                        circle
                      ></el-button>
                      <el-button
                        type="primary"
                        size="mini"
                        style="display: inline-block;"
                        @click.stop="subItemMoveUp(opt.itemId, scope.row.itemId)"
                        icon="el-icon-top"
                        circle
                      ></el-button>
                      <el-button
                        type="primary"
                        size="mini"
                        style="display: inline-block;"
                        @click.stop="subItemMoveDown(opt.itemId, scope.row.itemId)"
                        icon="el-icon-bottom"
                        circle
                      ></el-button>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="说明">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>

        <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import RankAfterSelSubject, {
  RankAfterSelOption
} from "./ts/RankAfterSelSubject";
import OrderBy, { OrderByTypes } from "./ts/OrderByTypes";
import TBaseQuestion from "./ts/TBaseQuestion";
import DataTypeSelector from "./DataTypeSelector.vue";
import EditorComponent from "./EditorComponent.vue";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";
import OrderByComponent from "./OderByComponent.vue";

import BatchAddComponent from "./BatchAddComponent.vue";
import RadioSelOption from "./ts/RadioSelOption";
@Component({
  components: {
    EditorComponent,
    DataTypeSelector,
    OrderByComponent,
    BatchAddComponent
  }
})
export default class RankAfterSelComponent extends TBaseQuestion<
  RankAfterSelOption,
  RankAfterSelSubject
> {
  $name: string = "RankAfterSelComponent";

  CheckedValues: Array<string> = [];

  options: RankAfterSelOption[] = [];
  msg: string = "";
  gotMsg: string[] = [];

  itemname = "";
  lixian = false;
  type = true;

  @Watch("msg")
  getstr() {
    this.gotMsg = this.msg.split("\n");
    this.gotMsg.forEach(element => {
      if (element != " ") {
        var opt = new RankAfterSelOption();
        opt.itemName = element;
        this.options.push(opt);
      }
    });
    this.Data.Options = this.options;
    this.options = [];
  }
  //显示题目内容div

  //获取options中每一项的name
  getOptionText(): string {
    let options = "";
    let n = this.Data.Options.length;
    for (let i = 0; i < n; i++) {
      if (i < n - 1) {
        options += this.Data.Options[i].itemName + "\n";
      } else {
        options += this.Data.Options[i].itemName;
      }
    }
    return options;
  }

  constructor() {
    super(RankAfterSelOption, RankAfterSelSubject);
    this.Data.QuestionType = QuestionTypes.qtSelRank;

    for (var i: number = 0; i < 5; ++i) {
      var opt = new RankAfterSelOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }

  itemNameArry() {
    this.itemname = this.getOptionText();
  }

  //输入框内容改变
  inputchange() {
    this.msg = this.getOptionText();
  }
  //删除选项
  remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }

  //向上移动选项
  moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }

  initOptions() {
    for (var i: number = 0; i < 5; ++i) {
      var opt = new RankAfterSelOption();
      opt.itemName = "选项" + i;
      this.Data.Options.push(opt);
    }
  }

  //插入选项
  insert(id: string): void {
    let options = this.Data.Options;
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      this.createNewOption(RankAfterSelOption)
    );
    this.msg = this.getOptionText();
  }

  insertSubItem(pId: string, id: string): void {
    let pOptions = this.Data.Options;
    var options =
      pOptions[pOptions.findIndex(item => item.itemId === pId)].SubItems;
    let subItem = this.createNewOption(RankAfterSelOption);
    subItem.itemName = "子选项" + (options.length + 1);
    options.splice(
      options.findIndex(item => item.itemId === id) + 1,
      0,
      subItem
    );
  }
  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getMaxSel(): number {
    return this.Data.Options.length;
  }

  setTitle(txt: string): void {}

  GetHtml(html: string): void {
    this.Data.Title = html;
  }

  SetOrderIndex(item: RankAfterSelOption, subItem: RankAfterSelOption): void {
    let options = item.SubItems;

    if (subItem.HasChecked) {
      subItem.OrderIndex = this.GetHasCheckedNum(item);
    } else {
      var itemOrder = subItem.OrderIndex;
      subItem.OrderIndex = 0;

      for (var item of options) {
        if (item.HasChecked && item.OrderIndex > itemOrder) item.OrderIndex--;
      }
    }
  }
  //取得已选择的数量
  GetHasCheckedNum(items: RankAfterSelOption): number {
    let num = 0;

    for (var item of items.SubItems) {
      if (item.HasChecked) num++;
    }
    return num;
  }
  //添加子选项
  addSubItem(parentId: string) {
    let options = this.Data.Options;
    var opt = options[options.findIndex(item => item.itemId === parentId)];
    let subItem = this.createNewOption(RankAfterSelOption);
    subItem.itemName = "子选项" + (opt.SubItems.length + 1);
    opt.SubItems.push(subItem);
  }
  //删除子选项
  removeSubItem(parentId: string, subItemId: string) {
    let options = this.Data.Options;
    var subItems =
      options[options.findIndex(item => item.itemId === parentId)].SubItems;

    subItems.splice(options.findIndex(item => item.itemId === subItemId), 1);
  }
  subItemMoveUp(pId: string, id: string): void {
    let pOptions = this.Data.Options;
    var options =
      pOptions[pOptions.findIndex(item => item.itemId === pId)].SubItems;

    let index = options.findIndex(item => item.itemId === id);

    if (index === 0) return;

    var upObj = options[index - 1];
    var moveObj = options[index];
    options.splice(index, 1, upObj); //(索引，长度，值)
    options.splice(index - 1, 1, moveObj); //(索引，长度，值)
  }

  subItemMoveDown(pId: string, id: string) {
    let pOptions = this.Data.Options;
    var options =
      pOptions[pOptions.findIndex(item => item.itemId === pId)].SubItems;
    var index = options.findIndex(item => item.itemId === id);

    if (index === options.length - 1) return;

    var downObj = options[index + 1];
    var moveObj = options[index];
    options.splice(index, 1, downObj); //(索引，长度，值)
    options.splice(index + 1, 1, moveObj); //(索引，长度，值)
  }

  changeSubItem(item: RankAfterSelOption) {
    if (!item.HasChecked) {
      for (var sub of item.SubItems) {
        sub.OrderIndex = 0;
        sub.HasChecked = false;
      }
    } else {
      var checkNum = 0;
      for (var opt of this.Data.Options) {
        if (opt.HasChecked) {
          checkNum++;
        }
      }
      if (checkNum > this.Data.MaxSel) {
        item.HasChecked = false;
      }
    }
  }

  handleClick(): void {
    //alert('clicked');
    console.info("");
  }

  
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;

  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}
</style>
